<template>
	<div>
		<detail-header></detail-header>
		<detail-imginfo :list="imgList"></detail-imginfo>
		<detail-content :list="actList" :user="user"></detail-content>
<!--         <detail-footer></detail-footer> -->

    <div>
      <!-- 数量页面及半遮罩 -->
      <transition name="el-zoom-in-bottom">
        <div v-show="show2" class="tocar">
          <div class="tocar-content">
            {{'活动名称：' + activityName}}
          </div>
           <div class="tocar-content">
            {{'剩余名额：' + resNumber}}
          </div>
          <div class="count">
            <el-input-number 
              v-model="joinNumber" 
              @change="handleChange" 
              :min="1" 
              :max="resNumber" 
              size = "small" 
              label="描述文字">
            </el-input-number>
          </div>
          <div style="margin-top: 25px;">
            <el-col :span="12" class="div-tocarbtn">
               <el-button type="danger" round @click="sendtocar">加入空间</el-button>
            </el-col>
          <div style="margin-top: 25px;">
            <el-col :span="12" class="div-tocarbtn">
               <el-button type="danger" round @click="show3=true">立即参加</el-button>
            </el-col>
          </div>
          </div>
        </div>
      </transition>
      <transition name="el-zoom-in-bottom">
        <div v-show="show2" class="tocarmask" @click="show2 = false; show3 = false"></div>
      </transition>
      <!-- 填写报名信息 -->
      <transition name="el-zoom-in-bottom">
        <div v-show="show3" class="tojoin">
          <div style="margin: 10px 20px 5px 20px;">
            <p style="text-align: center;margin: 10px 0 15px 0;font-size: 18px;">请填写您的相关信息</p>
            <el-form label-position="top" label-width="80px" :model="form" :rules="rules" ref="form" class="demo-ruleForm">
              <el-form-item label="参与者姓名" prop="name">
                <el-input v-model="form.name" placeholder="填一人即可"></el-input>
              </el-form-item>
              <el-form-item label="参与者联系方式" prop="telNumber">
                <el-input v-model="form.telNumber" placeholder="填一个即可"></el-input>
              </el-form-item>
              <el-form-item style="text-align: center;">
                <el-button type="primary" @click="submitForm('form')">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </transition>
      <footer>
        <el-row>
          <el-col :span="6" class="div-cell">
            <div class="grid-content iconfont el">
              <i class="ico-info bg-color" v-show="islike == true" @click="isnotlike">&#xe697;</i>
              <i class="ico-info" v-show="islike == false" @click="islikes">&#xe697;</i>
            </div>
          </el-col>
          <el-col :span="6" class="div-cell">
            <div class="grid-content iconfont el">
              <i class="ico-info bg-color" v-show="iscollect == true" @click="iscollects">&#xe614;</i>
              <i class="ico-info" v-show="iscollect == false" @click="isnotcollect">&#xe614;</i>
            </div>
          </el-col>
          <el-col :span="12" class="div-cell">
             <el-button type="danger" round @click="iscar">我想要</el-button>
          </el-col>
        </el-row>
      </footer>
      <div style="height: 47px"></div>
    </div>
	</div>
</template>

<script>
import DetailHeader from './components/Header.vue'
import DetailImginfo from './components/Imginfo.vue'
import DetailContent from './components/Content.vue'
// import DetailFooter from './components/Footer.vue'
import axios from 'axios'
import qs from 'qs'
import Message from 'element-ui';
export default {
    name:'Detail',
    props: {
      activityId: String
    },
    components: {
    	DetailHeader,
    	DetailImginfo,
    	DetailContent,
    },
    data () {
    	return {
        localStorageCollect: '',
        localStorageLike: '',
        show1: false,
        show2: false,
        show3: false,
        islike: '',
        iscollect: '',
        joinNumber: 1,
        resNumber: 0,
        activityName: '',
    		actList: [],
    		imgList: {},
        user: {},
        form: {
          name: '',
          telNum: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
          ],
          telNumber: [
            { required: true, message: '请输入电话号码', trigger: 'blur' },
            { min: 11, max: 11, message: '11个字符', trigger: 'blur' }
          ]
        }
    	}
    },
    // mounted() {
    // 	this.getData();
    // },
    // methods: {
    // 	getData() {
    // 		axios.get('/hotdetail', {
    // 			params: {
    //   			ID: this.id
    // 				}
  		// 		})
  		// 			.then(this.getHotDetailInfoSucc)
				// 	  .catch(function (error) {
				// 	    console.log(error);
				// 	  });
    // 	},
    // 	getHotDetailInfoSucc(res) {
    // 		res=res.data
    // 		if (res.ret && res.data) {
    // 			const data = res.data
    // 			this.detailList = data
    // 		}
    // 	}
    // }
    methods: {
      iscollects() {
        this.$message({
          message:'取消收藏',
          type:'warning',
          offset: 44
        });
        this.localStorageCollect = "收藏活动ID:" + this.activityId
        if(window.localStorage.localStorageCollect) {
          window.localStorage.removeItem(this.localStorageCollect)
          window.localStorage.setItem(this.localStorageCollect, JSON.stringify(false))
        }else {
          window.localStorage.setItem(this.localStorageCollect, JSON.stringify(false))
        };
        this.iscollect = JSON.parse(localStorage.getItem(this.localStorageCollect))
      },
      isnotcollect() {
        this.$message({
          message:'收藏成功',
          type:'success',
          offset: 44
        });
        this.localStorageCollect = "收藏活动ID:" + this.activityId
        if(window.localStorage.localStorageCollect) {
          window.localStorage.removeItem(this.localStorageCollect)
          window.localStorage.setItem("收藏活动ID:" + this.activityId, JSON.stringify(true))
        }else {
          window.localStorage.setItem("收藏活动ID:" + this.activityId, JSON.stringify(true))
        }
        this.iscollect = JSON.parse(localStorage.getItem(this.localStorageCollect))
      },
      isnotlike() {
        this.islike = !this.islike;
        this.$message({
          message:'点赞取消',
          type:'warning',
          offset: 44
        });
        this.localStorageLike = "点赞活动ID:" + this.activityId
        if(window.localStorage.localStorageLike) {
          window.localStorage.removeItem(this.localStorageLike)
          window.localStorage.setItem(this.localStorageLike, JSON.stringify(false))
        }else {
          window.localStorage.setItem(this.localStorageLike, JSON.stringify(false))
        };
        this.islike = JSON.parse(localStorage.getItem(this.localStorageLike))
      },
      islikes() {
        this.islike = !this.islike;
        this.$message({
          message:'点赞成功',
          type:'success',
          offset: 44
        });
        this.localStorageLike = "点赞活动ID:" + this.activityId
        if(window.localStorage.localStorageLike) {
          window.localStorage.removeItem(this.localStorageLike)
          window.localStorage.setItem("点赞活动ID:" + this.activityId, JSON.stringify(true))
        }else {
          window.localStorage.setItem("点赞活动ID:" + this.activityId, JSON.stringify(true))
        }
        this.islike = JSON.parse(localStorage.getItem(this.localStorageLike))
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            
            // alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
      sendtocar() {
        this.$message({
          message:'已加入活动空间',
          type:'success',
          offset: 44
        })
         // axios.get('/hotdetail', {
         //   params: {
         //     activityId:this.id4,
         //     num:this.num
         //     }
         //   })
         //     .then(this.getHotDetailInfoSucc)
         //     .catch(function (error) {
         //       console.log(error);
         //     });
        axios.post( "/api/computer/addComputer",
          qs.stringify({
            activityId:this.activityId,
            joinNumber:this.joinNumber
         }))
            .then(res => {
              console.log(res);
          })
            .catch(err => {
              console.log(err);
          });
        this.show2 = false;
      },
      iscar() {
        this.show2 = !this.show2;
        this.activityName = this.actList[0].activityName;
        this.resNumber = this.actList[0].limitNumber - this.actList[0].tookNumber;
      },
      join() {
        this.show1 = !this.show1;
      },
      handleChange(value) {
        console.log(value);
      },
      getHotDetailInfo () {
          axios.get('/static/mock/detail.json')
              .then(this.getHotDetailInfoSucc)
      },
      getHotDetailInfoSucc (res) {
          res = res.data
          if (res.ret && res.data) {
               const data = res.data
               this.actList = data.actList
               this.imgList = data.imgList
               this.user = data.user
          }else {
              alert('数据获取失败')
          }
           //console.log(res)
      },
      getlocalcollect() {
        this.localStorageCollect = "收藏活动ID:" + this.activityId;
        let content = JSON.parse(localStorage.getItem(this.localStorageCollect))
        if(content == null) {
          this.iscollect =false
        }else {
          this.iscollect = content;
        }
      },
      getlocallike() {
        this.localStorageLike = "点赞活动ID:" + this.activityId;
        let content2 = JSON.parse(localStorage.getItem(this.localStorageLike))
        if(content2 == null) {
          this.islike =false
        }else {
          this.islike = content2;
        }
      }
    },
    mounted () {
        this.getHotDetailInfo();
        this.getlocalcollect();
        this.getlocallike();
    }
}
</script>

<style scoped>
    .tocar {
      position:fixed;
      bottom:0;
      z-index:999;
      height: 180px;
      width: 100%;
      background-color: white;
    }
    .tojoin {
      position:fixed;
      bottom:0;
      z-index:999;
      height: 500px;
      width: 100%;
      background-color: white;
    }
    .tocar-content {
      padding: 10px 0 5px 20px;
      line-height: 25px;
    }
    .count {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .tocarmask {
      position:fixed;
      bottom:0;
      z-index:900;
      height: 100%;
      width: 100%;
      background-color: #ccc;
      opacity: 0.65;
    }
    footer {
      position:fixed;
      bottom:0;
      z-index:99;
      height: 41px;
      width: 100%;
      background-color: white;
      border-top: 1px solid #eee;
    }
    .div-tocarbtn {
      padding: 0 0 5px 0;
      text-align: center;
    }
    .div-cell {
      line-height: 40px;
      text-align: center;
    }
    .div-cell-btn {
      line-height: 40px;
    }
    .el {
      display: flex;
      justify-content: center;
      align-items: center;
    }
         
    .grid-content {
      text-align: center;
      height: 40px;
      font-size: 27px;
    }
    .ico-info {
      vertical-align: middle;
    }
    .bg-color {
      color: red;
    }
</style>